<template>
    <div class="container">
        <a-breadcrumb
            :routes="[{ label: '专栏管理', path: 'content/column' }, { label: '编辑课程', path: '/content/column' },]">
        </a-breadcrumb>
        <a-card class="general-card" title="课程管理">
            <a-row>
                <a-form :model="formModel" auto-label-width>
                    <a-col :flex="1">
                        <a-row :gutter="16">
                            <a-col :span="3">
                                <a-select v-model="formModel.state">
                                    <a-option v-for="item in state" :value="item.value">{{ item.label }}</a-option>
                                </a-select>
                            </a-col>
                            <a-col :span="3">
                                <a-select v-model="formModel.hide">
                                    <a-option v-for="item in hideList" :value="item.value">{{ item.label }}</a-option>
                                </a-select>
                            </a-col>
                            <a-col :span="4.5">
                                <a-form-item field="name" label="">
                                    <a-input max-length="30" v-model="formModel.vname" placeholder="请输入课程标题" />
                                </a-form-item>
                            </a-col>
                            <a-col :flex="'86px'">
                                <a-space :size="18">
                                    <a-button @click="fetchData(true)">
                                        <template #icon>
                                            <icon-search />
                                        </template>
                                        搜索
                                    </a-button>
                                    <a-button type="primary" @click="$router.push('handlecolumn')">
                                        <template #icon>
                                            <icon-plus></icon-plus>
                                        </template>
                                        添加课程
                                    </a-button>
                                    <a-button type="outline">
                                        <template #icon>
                                            <icon-upload />
                                        </template>
                                        批量提交
                                    </a-button>
                                    <a-button type="outline">
                                        <template #icon>
                                            <icon-delete />
                                        </template>
                                        批量删除
                                    </a-button>
                                </a-space>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-form>
            </a-row>
            <a-divider style="margin-top: 0" />
            <a-table row-key="id" :row-selection="rowSelection" :loading="loading" :pagination="pagination"
                :data="renderData" :columns="columns" :bordered="false" @page-change="onChangePage($event)">
                <template #index="{ rowIndex }">
                    {{ (pagination.current - 1) * 10 + rowIndex + 1 }}
                </template>
                <template #columncard="{ record }">
                    <div class="flex-clo">
                        <a-input style="width: 300px;" v-model="record.businessName"></a-input>
                        <div class="flex ali-cen sub-info">
                            <a-button shape="round" type="outline" status="success" size="mini">
                                审核通过
                            </a-button>
                            <span class="sub-text">
                                2022-12-03 09:35:03
                            </span>
                        </div>
                    </div>
                </template>
                <template #num="{ record }">
                    <a-space direction="vertical">
                        <div class="flex ali-cen">
                            视频 <a-button size="mini" shape="round" type="outline">播放</a-button>
                        </div>
                        <div class="flex ali-cen">
                            时长：08:24
                        </div>
                        <a-button type="primary">更换视频</a-button>
                    </a-space>
                </template>
                <template #activity>
                    <a-select>
                        <a-option>横屏</a-option>
                        <a-option>竖屏</a-option>
                    </a-select>
                </template>
                <template #trysee>
                    <a-switch></a-switch>
                </template>
                <template #operate>
                    <a-space direction="vertical">
                        <a-link :hoverable="false">开启单独售卖</a-link>
                        <a-link :hoverable="false">重新提审</a-link>
                        <a-link :hoverable="false" @click="onGoClass">删除</a-link>
                        <a-link :hoverable="false" @click="onChangeState">隐藏</a-link>
                    </a-space>
                </template>
            </a-table>
        </a-card>
        <a-modal v-model:visible="qrcodeVisible" title="课程二维码" @cancel="closeDialog" :footer="false" unmountOnClose>
            <div class="dialog-content">
                <div class="code-box">
                    <div class="code-title">
                        <img src="https://qiniu.htknow.com/17931_014aee14a58b0681cb960f6aa3fe6765.png?imageslim"
                            alt="">抖音
                    </div>
                    <div class="code-img-box">
                        <img class="code-img" src="https://qiniu.htknow.com/saas_9217_57d0b2f231c48b3833e928927824851e"
                            alt="">
                    </div>
                </div>
                <a-button type="primary" size="small"
                    @click="onSaveImg('https://qiniu.htknow.com/saas_9217_57d0b2f231c48b3833e928927824851e', '抖音')">保存二维码</a-button>
            </div>
        </a-modal>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { queryList } from '@/api/list';
import { ListRecord } from '@/api/list';
import { Message } from '@arco-design/web-vue';
const generateFormModel = () => {
    return {
        state: '全部状态',
        app: '全部平台',
        hide: '全部',
        vname: ''
    };
};
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const state = [
    {
        value: '全部状态',
        label: '全部状态',
    },
    {
        value: '未审核',
        label: '未审核',
    },
    {
        value: '预审中',
        label: '预审中',
    },
    {
        value: '抖音审核中',
        label: '抖音审核中',
    },
    {
        value: '审核驳回',
        label: '审核驳回',
    },
    {
        value: '审核通过',
        label: '审核通过',
    },
]
const hideList = [
    {
        value: '全部',
        label: '全部',
    },
    {
        value: '隐藏课程',
        label: '隐藏课程',
    },
    {
        value: '显示课程',
        label: '显示课程',
    },
]
const { loading, setLoading } = useLoading(true);
const renderData = ref<ListRecord>();
const formModel = ref(generateFormModel());
const basePagination: Pagination = {
    current: 1,
    pageSize: 10,
};
const pagination = reactive({
    ...basePagination,
});
const fetchData = async (clear?: boolean) => {
    setLoading(true)
    try {
        const { data: res } = await queryList()
        console.log(res)
        renderData.value = res.data;
    } catch (error) {

    } finally {
        setLoading(false);
    }
}
fetchData();
const onChangePage = (e: number) => {
    pagination.current = e;
    fetchData();
}
const columns = [
    {
        title: '序号',
        align: 'center',
        width: 60,
        slotName: 'index'
    },
    {
        title: '标题',
        align: 'left',
        slotName: 'columncard'
    },
    {
        title: '课程信息',
        dataIndex: 'payCount',
        slotName: 'num',
        align: 'center',
        width: 100,
    },
    {
        title: '播放模式',
        slotName: 'activity',
        align: 'center',
        width: 180,
    },
    {
        title: '是否可试看',
        slotName: 'trysee',
        align: 'center',
        width: 180,
    },
    {
        title: '操作',
        align: 'right',
        width: 140,
        slotName: 'operate',
    },
];
const onChangeState = () => {
    Message.success('操作成功')
}
// 生成二维码
const qrcodeVisible = ref<Boolean>(false);
const openDialog = () => {
    qrcodeVisible.value = true;
}
const closeDialog = () => {
    qrcodeVisible.value = false;
}
const onSaveImg = (imgSrc: string, fileName: string) => {
    console.log(imgSrc)
    console.log(fileName)
}
const onGoClass = () => {
    console.log('1111')
}
</script>
  
<script lang="ts">
export default {
    name: 'VipTable',
};
</script>
  
<style scoped lang="less">
.container {
    padding: 20px;
}

.card {
    display: flex;
}

.card-img {
    width: 120px;
    height: 160px;
    border-radius: 12px;
    margin-right: 20px;
}

.card-info {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .name {
        font-size: 14px;
        color: #37383c;
        font-weight: bold;
    }

    .price {
        color: #f24e4e;
        font-size: 16px;
        font-weight: bold;
    }
}

.sub-info {
    color: #888a95;
    font-size: 12px;
    margin-top: 20px;

    span {
        margin-left: 10px;
    }
}

.dialog-content {
    text-align: center;

    .code-box {
        margin: 0 auto 10px;
        width: 150px;
        background-color: #F8F9FB;
        border: 1px solid #E8F2FD;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .code-title {
        width: 100%;
        height: 34px;
        background-color: #E4F0FE;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 20px;
            height: 20px;
            margin-right: 7px;
        }
    }

    .code-img {
        width: 126px;
        height: 126px;
        margin: 12px 0;
    }
}


:deep(.arco-table-th) {
    &:last-child {
        .arco-table-th-item-title {
            margin-left: 16px;
        }
    }
}
</style>
  